<template>
  <div class="data_watch ml20 pb20 oh">
    <div class="fz20 fw tf mt10 tac w_title" @click="goWatch">
      数 据 采 集 监 测<span class="tf6">(1673)</span>
    </div>
    <div class="pl20 bz pr20">
      <div class="dis_f mt10" v-for="(item, index) in watchlist" :key="index">
        <div
          class="tf4 fw"
          style="
            min-width: 100px;
            text-align: justify;
            text-align-last: justify;
          "
        >
          {{ item.name }}
        </div>
        <div class="dis_f ml50 fww">
          <div
            class="tf7 mr80"
            style="min-width: 200px"
            v-for="(v, i) in item.content"
            :key="i"
          >
            {{ v }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Data from "../data/net";
import { reactive } from "vue";
let watchlist = reactive();
watchlist = Data;
import { useRouter } from "vue-router";
const $router = useRouter();
function goWatch() {
  $router.push({
    path: "/map",
  });
}
</script>

<style lang="scss" scoped>
.data_watch {
  background-image: url("../assets/img/bg03.png");
  background-size: cover;
  width: 80%;
}
.w_title {
  user-select: none;
  cursor: pointer;
}
</style>